<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            *{margin: 0;padding:0;box-sizing: border-box}
            .container{
                width: 800px;
                margin: 50px auto;
            }

            .item{
                clear:both;
                width: 100%;
            }
            .item .order{
                width: 10%;
                float:left;
                padding: 20px;
            }

            .item .info{
                width: 60%;
                float:left;
                padding: 20px;
            }

            .item .wide{
                width: 90%;
            }
            .item .title{
                margin-bottom: 40px;
            }
            hr{
                clear:both;
            }
            .item .img{
                padding: 20px;
                width: 30%;
                float:left
            }
        </style>
    </head>
    <body>
        <div id="root"></div>
        <script src="./js/react.development.js"></script>
        <script src="./js/react-dom.development.js"></script>
        <script src="./js/babel.min.js"></script>
        <script type="text/babel">
            //数据
            let data = [
                {
                    id: "0_1628426974.6828957",
                    title: "如何看待北京野生动物园通报，游客因琐事发生撕打，引发附近动物效仿？动物真的会模仿这类行为吗？",
                    img: "https://pic1.zhimg.com/80/v2-22886300464f5a2f7e002e40392dc7cb_1440w.jpg?source=1940ef5c",
                    hot: "1504 万领域热度",
                },
                {
                    id: "1_1628426974.6836996",
                    title: "联合利华中国区副总裁曾锡文称梦龙事件是「无妄之灾」，对此你如何评价？",
                    img: "https://pic1.zhimg.com/80/v2-14067671559a9f20bc2a349cac69ec96_1440w.png",
                    hot: "862 万领域热度",
                },
                {
                    id: "2_1628426974.6843448",
                    title: "因禄口机场疫情防控不力，南京市卫健委主任被免职，副市长被记过处分，还有哪些信息值得关注？",
                    hot: "742 万领域热度",
                },
                {
                    id: "3_1628426974.685571",
                    title: "上海电气总裁黄瓯跳楼自尽，有哪些值得关注的信息？这会对上海电气有哪些影响？",
                    img: "https://pic2.zhimg.com/80/v2-a08de40b4bacb53c1d4be86752e8b8c1_1440w.png",
                    hot: "688 万领域热度",
                },
                {
                    id: "4_1628426974.6863558",
                    title: "郑州一医生确诊，前 7 次检测结果为阴，第 8 次才显阳，德尔塔具有高隐蔽性吗？防范还需要注意什么？",
                    img: "https://pic3.zhimg.com/v2-33146c5a7c499464396c120d8afa0969_720w.jpg?source=2044ae36",
                    hot: "401 万领域热度",
                },
                {
                    id: "5_1628426974.687",
                    title: "8 月 7 日，江苏新增本土确诊 38 例，其中扬州 36 例，目前情况如何？有哪些信息值得关注？",
                    img: "https://picb.zhimg.com/50/v2-a8a242a31e99275f90e871b600890c6a_b.jpg",
                    hot: "127 万领域热度",
                },
                {
                    id: "6_1628426974.6875176",
                    title: "在家里阳台种满花草是一种什么样的体验？",
                    img: "https://pic1.zhimg.com/50/v2-488e63324e50356e2ba5da6fdf4aea8c_b.jpg",
                    hot: "87 万领域热度",
                },
                {
                    id: "7_1628426974.6881711",
                    title: "如何看待女子撞伤右肩被做左肩手术，医院称「确实发生医疗失误」？涉事医生及医院将承担哪些责任？",
                    hot: "77 万领域热度",
                },
                {
                    id: "8_1628426974.6887908",
                    title: "升学宴该怎么致辞？",
                    img: "https://pic3.zhimg.com/50/v2-7f1afe199bab972719ca3878061db54a_b.jpg",
                    hot: "59 万领域热度",
                },
                {
                    id: "9_1628426974.6892145",
                    title: "客机为什么不用飞翼式气动外形？",
                    img: "https://pic1.zhimg.com/50/v2-c3af29735119276b70b0c36a5ac12371_b.jpg",
                    hot: "52 万领域热度",
                },
                {
                    id: "10_1628426974.6895468",
                    title: "为什么骑很多种类的马，但是没有人骑斑马？",
                    img: "https://pic3.zhimg.com/v2-7f4e3dea8f103a43764d72fa814409fc.jpg?source=2044ae36",
                    hot: "48 万领域热度",
                },
                {
                    id: "11_1628426974.689924",
                    title: "怎样很快彻底的忘记一个人？",
                    img: "",
                    hot: "46 万领域热度",
                },
                {
                    id: "12_1628426974.6901717",
                    title: "熬夜熬习惯了，晚上睡不着怎么办？",
                    img: "https://pic3.zhimg.com/50/v2-43420ee179aaa5bc93d95099a36a82c3_b.jpg",
                    hot: "45 万领域热度",
                },
                {
                    id: "13_1628426974.6904864",
                    title: "各个时代都有哪些占据绝对优势的「顶级掠食者」？",
                    img: "https://picb.zhimg.com/50/v2-076f9409cfb4a13616de67324bab3ddc_b.jpg",
                    hot: "36 万领域热度",
                },
                {
                    id: "14_1628426974.6908004",
                    title: "如何看待新冠「拉姆达」变异毒株或可逃避中和抗体？人类想要战胜疫情该怎样努力？",
                    img: "https://pica.zhimg.com/80/v2-fde3e85895709e1af6146bf15e4b216d_1440w.jpg?source=1940ef5c",
                    hot: "35 万领域热度",
                },
            ];
        
            //
            class App extends React.Component{
                render(){
                    return <div className="container">
                            <h2>知乎热榜</h2>
                            <hr />
                            <div className="zhihu-list">
                                {
                                    data.map((item, index) => {
                                        return  <div> 
                                            <div className="item">
                                                    <div className="order">{index + 1}</div>
                                                    <div className={"info " + (item.img ? '' : 'wide') }>
                                                        <div className="title">{item.title}</div>
                                                        <div className="hot">
                                                            <span>{item.hot}</span>    
                                                        </div>
                                                    </div>
                                                    {item.img && <div className="img">
                                                        <img width="100%" src={item.img} alt="" />    
                                                    </div>}
                                                    
                                                </div>
                                                <hr/>
                                            </div>
                                    })
                                }
                                
                            </div>
                        </div>
                }
            }

            ReactDOM.render(<App />, document.querySelector("#root"))
        </script>
    </body>
</html>
